<template>
  <template v-if="!noData">
    <div :class="ns.b()">
      <div :class="ns.e('left-menu')">
        <side-menu ref="sideMenu" :groups="groupList" :group="currentGroup" @change="handleCurrentChange" @refresh="refreshPage" @open="openDialog"></side-menu>
      </div>
      <div :class="ns.e('right-main')">
        <monitor-content :group="currentGroup" @changeGroupName="getGroupList" @open="openDialog"></monitor-content>
      </div>
    </div>
  </template>
  <template v-else>
    <vc-nodata :type="100" :class="ns.e('no-data')">
      <span>暂无组合，</span>
      <span class="nodata-new-btn" @click="openDialog('groupAdd')">去新建</span>
    </vc-nodata>
  </template>

  <!-- 新建组合dialog -->
  <group-add-dialog v-model="groupAddDialog" @addGroup="getGroupList"></group-add-dialog>

  <!-- 组合成员管理dialog -->
  <template v-if="memberManageDialog">
    <member-manage-dialog v-model="memberManageDialog" :groups="groupList" :group="currentGroup" @close="getGroupList"></member-manage-dialog>
  </template>

  <template v-if="pushSettingDialog">
    <push-setting-dialog v-model="pushSettingDialog" :groups="groupList" :group="currentGroup"></push-setting-dialog>
  </template>
</template>

<script setup lang="ts">
import SideMenu from './components/side-menu.vue';
import MonitorContent from './components/monitor-content.vue';
import GroupAddDialog from './components/group-add-dialog.vue';
import MemberManageDialog from './components/member-manage-dialog.vue';
import PushSettingDialog from './components/push-setting-dialog.vue';
import { useTabs } from 'vc/src/web';
import { useNamespace } from 'vc/src/use';
import { type IGroup, getGroupListAndCompanyId } from './apis';
import { flatMap } from 'lodash-es';

const { setTitle, refreshPage } = useTabs();
setTitle('组合监控');

const ns = /* hoist-static*/ useNamespace('monitor');
defineOptions({ name: ns.b() });

const groupList = ref([]);
const currentGroup = ref<IGroup>({
  id: 0,
  name: '',
  companyIds: []
});

const sideMenu = ref();
const handleCurrentChange = (item: any) => {
  currentGroup.value = item;
};
const syncSideMenu = () => {
  nextTick(() => {
    try {
      sideMenu.value.getList();
    } catch {}
  });
};

const noData = ref(false);
const getGroupList = async (init = false) => {
  const res = await getGroupListAndCompanyId();
  if (res?.items?.length) {
    groupList.value = res.items;
    if (init) {
      currentGroup.value = res.items.find((item) => item.isDefault === 1) || res.items[0];
    } else {
      currentGroup.value = res.items.find((item) => item.id === currentGroup.value.id) || res.items[0];
    }
    syncSideMenu();
  } else {
    noData.value = true;
  }
};
getGroupList(true);
// getGroupList(false);

const groupAddDialog = ref(false);
const memberManageDialog = ref(false);
const pushSettingDialog = ref(false);
const openDialog = (name: string) => {
  if (name === 'groupAdd') groupAddDialog.value = true;
  if (name === 'memberManage') memberManageDialog.value = true;
  if (name === 'pushSetting') pushSettingDialog.value = true;
};
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
